@mixin clearfix {
  &::after {
    content: "";
    clear: both;
    display: table;
  }
}

@mixin absCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin respond($breakpoint) {
  @if $breakpoint == phone or $breakpoint==xs {
    // 600px
    @media (max-width: 37.5em) {
      @content;
    }
  }
  @if $breakpoint == tab-port or $breakpoint==sm {
    // 900px
    @media (max-width: 56.25em) {
      @content;
    }
  }
  @if $breakpoint == tab-land or $breakpoint==lg {
    // 1200px
    @media (max-width: 75em) {
      @content;
    }
  }
  @if $breakpoint == big-desktop or $breakpoint==xl {
    // 1800px
    @media (min-width: 112.5em) {
      @content;
    }
  }
}
